<template>
  <div class="table">
    <table :style="tableStyle" class="myTable">
      <tbody>
        <slot name="tr_l"></slot>
      </tbody>
    </table>
    <table :style="tableStyle" class="myTable">
      <tbody>
        <slot name="tr_r"></slot>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      styleObject: {},
      s_showByRow: true,
    };
  },
  props: ['tableData', 'tableStyle', 'showByRow'],
  computed: {
    rowCount: function () {
      return Math.ceil(this.tableData.length / 2);
    }
  },
  created () {
    this.styleObject = this.tableStyle;
    if (this.showByRow !== undefined) {
      this.s_showByRow = this.showByRow;
    }
  },
}
</script>

<style scoped>
.table {
    display: flex;
    justify-content: space-between;
}
.myTable {
    border-collapse: collapse;
    /* margin: 0 auto; */
    text-align: center;
}

.myTable td,
.myTable th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 60px;
    line-height: 60px;
}
</style>

